<template>
  <view class="container">
    <!-- 搜索条件表单 -->
    <view class="search-form">
      <view class="form-group">
        <text class="form-label">案件号</text>
        <input 
          type="text" 
          placeholder="请输入案件号" 
          class="form-input"
          v-model="searchForm.caseNumber"
        />
      </view>

      <view class="form-group">
        <text class="form-label">当事人姓名</text>
        <input 
          type="text" 
          placeholder="请输入当事人姓名" 
          class="form-input"
          v-model="searchForm.partyName"
        />
      </view>

      <view class="form-group">
        <text class="form-label">案件类型</text>
        <picker 
          @change="onCaseTypeChange" 
          :value="searchForm.caseTypeIndex" 
          :range="caseTypeOptions"
        >
          <view class="picker">{{ searchForm.caseTypeIndex === 0 ? '请选择' : caseTypeOptions[searchForm.caseTypeIndex] }}</view>
        </picker> <!-- 修正：添加了结束标签 -->
      </view>

      <view class="form-group">
        <text class="form-label">案件状态</text>
        <picker 
          @change="onCaseStatusChange" 
          :value="searchForm.caseStatusIndex" 
          :range="caseStatusOptions"
        >
          <view class="picker">{{ searchForm.caseStatusIndex === 0 ? '请选择' : caseStatusOptions[searchForm.caseStatusIndex] }}</view>
        </picker> <!-- 修正：添加了结束标签 -->
      </view>

      <view class="date-group">
        <view class="form-group">
          <text class="form-label">开始日期</text>
          <picker mode="date" @change="onStartDateChange" :value="searchForm.startDate">
            <view class="picker">{{ searchForm.startDate || '请选择' }}</view>
          </picker> <!-- 修正：添加了结束标签 -->
        </view>
        <view class="form-group">
          <text class="form-label">结束日期</text>
          <picker mode="date" @change="onEndDateChange" :value="searchForm.endDate">
            <view class="picker">{{ searchForm.endDate || '请选择' }}</view>
          </picker> <!-- 修正：添加了结束标签 -->
        </view>
      </view>

      <button class="search-btn" @click="performSearch">查询</button>
    </view>

    <!-- 查询结果列表 -->
    <view class="result-list" v-if="searchResults.length > 0">
      <text class="list-title">查询结果 ({{ searchResults.length }})</text>
      <view 
        v-for="(item, index) in searchResults" 
        :key="item.id" 
        class="result-item"
        @click="goToCaseDetail(item.id)"
      >
        <view class="item-header">
          <text class="item-case-number">{{ item.caseNumber }}</text>
          <text class="item-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
        </view>
        <view class="item-body">
          <text class="item-party">当事人: {{ item.partyName }}</text>
          <text class="item-type">类型: {{ item.type }}</text>
        </view>
        <view class="item-footer">
          <text class="item-date">立案日期: {{ item.filingDate }}</text>
          <text class="item-court">审理法院: {{ item.court }}</text>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="searchResults.length === 0 && hasSearched" class="no-result">
      <text>未找到符合条件的案件</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        caseNumber: '',
        partyName: '',
        caseTypeIndex: 0, // 0 为 "请选择"
        caseStatusIndex: 0,
        startDate: '',
        endDate: '',
      },
      caseTypeOptions: ['请选择', '民事案件', '刑事案件', '行政案件', '知识产权案件'],
      caseStatusOptions: ['请选择', '审理中', '已结案', '已归档', '已撤诉'],
      searchResults: [], // 查询结果
      hasSearched: false, // 是否已执行过查询
      // 模拟案件数据（实际项目应从后端获取）
      mockCaseData: [
        {
          id: 1,
          caseNumber: '2025民初字第1234号',
          partyName: '张三',
          type: '民事案件',
          status: '审理中',
          filingDate: '2025-01-15',
          court: '北京市朝阳区人民法院',
        },
        {
          id: 2,
          caseNumber: '2025刑初字第5678号',
          partyName: '李四',
          type: '刑事案件',
          status: '已结案',
          filingDate: '2024-11-20',
          court: '上海市浦东新区人民法院',
        },
        {
          id: 3,
          caseNumber: '2025行初字第9012号',
          partyName: '王五',
          type: '行政案件',
          status: '已归档',
          filingDate: '2024-08-10',
          court: '广州市天河区人民法院',
        },
        {
          id: 4,
          caseNumber: '2025知民初字第3456号',
          partyName: '赵六',
          type: '知识产权案件',
          status: '审理中',
          filingDate: '2025-03-05',
          court: '深圳市南山区人民法院',
        },
      ]
    };
  },
  methods: {
    onCaseTypeChange(e) {
      this.searchForm.caseTypeIndex = parseInt(e.detail.value);
    },
    onCaseStatusChange(e) {
      this.searchForm.caseStatusIndex = parseInt(e.detail.value);
    },
    onStartDateChange(e) {
      this.searchForm.startDate = e.detail.value;
    },
    onEndDateChange(e) {
      this.searchForm.endDate = e.detail.value;
    },
    performSearch() {
      // 构建查询条件
      const filters = {
        caseNumber: this.searchForm.caseNumber.trim().toLowerCase(),
        partyName: this.searchForm.partyName.trim().toLowerCase(),
        caseType: this.caseTypeOptions[this.searchForm.caseTypeIndex],
        caseStatus: this.caseStatusOptions[this.searchForm.caseStatusIndex],
        startDate: this.searchForm.startDate,
        endDate: this.searchForm.endDate,
      };

      // 模拟查询（实际项目中应调用API）
      this.searchResults = this.mockCaseData.filter(caseItem => {
        // 案件号匹配
        if (filters.caseNumber && !caseItem.caseNumber.toLowerCase().includes(filters.caseNumber)) {
          return false;
        }
        // 当事人姓名匹配
        if (filters.partyName && !caseItem.partyName.toLowerCase().includes(filters.partyName)) {
          return false;
        }
        // 案件类型匹配
        if (filters.caseType !== '请选择' && filters.caseType !== caseItem.type) {
          return false;
        }
        // 案件状态匹配
        if (filters.caseStatus !== '请选择' && filters.caseStatus !== caseItem.status) {
          return false;
        }
        // 开始日期匹配
        if (filters.startDate && caseItem.filingDate < filters.startDate) {
          return false;
        }
        // 结束日期匹配
        if (filters.endDate && caseItem.filingDate > filters.endDate) {
          return false;
        }
        return true;
      });

      this.hasSearched = true;
    },
    goToCaseDetail(caseId) {
      uni.navigateTo({
        url: `/pages/case-detail/case-detail?id=${caseId}`
      });
    },
    getStatusClass(status) {
      switch (status) {
        case '审理中': return 'status-pending';
        case '已结案': return 'status-completed';
        case '已归档': return 'status-archived';
        case '已撤诉': return 'status-withdrawn';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.form-input {
  width: 100%;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  width: 100%;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fff;
  color: #333;
}

.date-group {
  display: flex;
  gap: 20rpx;
}

.date-group .form-group {
  flex: 1;
}

.search-btn {
  width: 100%;
  padding: 20rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin-top: 10rpx;
}

.result-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.result-item {
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.result-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-case-number {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.item-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.status-pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-completed {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-archived {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.status-withdrawn {
  background-color: #ffebee;
  color: #f44336;
}

.item-body, .item-footer {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>